<template>
	<!-- 字典 -->
	<div class="w100" v-if="item.dict">{{ SelectInfo(item.dict, getValue(record, item.slotName)) }}</div>
	<div v-else-if="item.sort" class="flex sort-box w100">
		<span>{{ getValue(record, item.slotName) }}</span>
        <div class="sort-icon">
            <ComIcon icon="EachApp_tuozhuai" style="color: #6B7785;" :size="12"></ComIcon>
        </div>
	</div>
	<!-- 默认值 -->
	<slot class="w100" v-else>{{ getValue(record, item.slotName) }}</slot>
</template>

<script setup lang="ts">
import { SelectInfo } from "@/utils/index";
import { getValue } from "@/utils/index";
defineProps({
	item: {
		type: Object as any
	},
	record: {
		type: Object as any
	}
});
</script>

<style scoped lang="scss">
.sort-box{
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    &:hover{
        .sort-icon{
            opacity: 1;
        }
    }
    .sort-icon{
        opacity: 0;
        padding: 4px;
        border-radius: 4px;
        line-height: 1;
        &:hover{
            background-color: #E9E9E9;
        }
    }
}
.w100{
    width: 100%;
}
</style>
